<script setup lang="ts">
import "@antv/x6/dist/index.css"
import "./index.css"
//
import { ref, onMounted } from "vue";
import {DefaultEdgeMD,DefaultNodeMD} from "./util"
import Main from "./main";

const props = withDefaults(defineProps<{main:Main,id?:string}>(), {})
const {main} = props;
// const {id} = toRefs(props)
// 注册默认节点
main.graph.registerNode('default-node',DefaultNodeMD)
main.graph.registerEdge('default-edge',DefaultEdgeMD)
// 自定义 html 容器实例
const boxRef = ref<HTMLDivElement>()
const graphBoxRef = ref<HTMLDivElement>()
const graphRef = ref<HTMLDivElement>()


onMounted(() => {
  // 挂载 graph 实例
  // @ts-ignore
  main.graph.mounted(graphRef.value,graphBoxRef.value,boxRef.value).init();
})

</script>

<template>
  <div ref="boxRef" class="antv-x6 relative w-full h-full flex overflow-hidden" :style="`background:${main.graph.isFull.value ? main.graph.fullBG.value : main.graph.BG.value}`" @contextmenu.prevent.stop="">
    <div v-if="main.nodelist.enabled.value && main.graph.mode.value == 'dev'" class="max-w-300px w-20% h-full">
      <component :is="main.nodelist.Nodelist" v-bind="main.nodelist.props"></component>
    </div>
    <div class=":uno: w-0 flex-1 flex flex-col relative">
      <div v-if="main.menu.enabled.value" class="h-10 w-full">
        <component :is="main.menu.Menu" v-bind="main.menu.props"></component>
      </div>
      <div ref="graphBoxRef" :class="['flex-1 relative overflow-hidden z-1',main.graph.animate.value ? 'animate-transition-box' : '']">
        <div ref="graphRef" :class="['w-full h-full transition-item']"></div>
        <!-- minimap -->
        <component v-if="main.minimap.enabled.value" :is="main.minimap.Minimap" v-bind="main.minimap.props"></component>
        <!-- drawer -->
        <component v-if="main.drawer.enabled.value" :is="main.drawer.Drawer" v-bind="main.drawer.props" ></component>
        <!-- contextmenu -->
        <component v-if="main.contextmenu.enabled.value" :is="main.contextmenu.Contextmenu" v-bind="main.contextmenu.props" ></component>
        <!-- toolbar -->
        <component v-if="main.toolbar.enabled.value" :is="main.toolbar.Toolbar" v-bind="main.toolbar.props" ></component>
        <!-- slot -->
        <slot></slot>
      </div>
      <!-- loading -->
      <div v-show="main.graph.loading.value" @click.stop="" class="w-full h-full absolute top-0 left-0 backdrop-blur-md flex items-center justify-center z-2 c-#bbb">
        <div class="i-svg-spinners:bars-rotate-fade w-20% h-20%"></div>
      </div>
    </div>
  </div>
</template>